<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{file.manage.title}">fileAll</title>
    <style>
        .btn-sm > span{
            margin-left: 5px;
            cursor: pointer;
        }
    </style>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-3;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-32-31-28; /* -32 顶部主菜单高度，   -90 查询条件高度*/
        }
        $(function () {
            resizePageSize();
            var _columnWidth = (_gridWidth-40)/3;
            $("#file-table-flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{/file/getFileListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'fileUuid',name : 'fileUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{file.name}]]*/"",name : 'fileName',width : _columnWidth, sortable : true,align : 'left',process: function (v, _trid, _row) {
                        var htmlContents="<div class='btn-sm'"
                        if(_row.fileType == 0){
                            htmlContents += '><i class="glyphicon glyphicon-file"></i>';
                        }else {

                            htmlContents += 'onclick="enterDir(\'' + _row.fileUuid + '\')"><i class="glyphicon glyphicon-folder-open"></i>';
                        }
                        htmlContents += '<span>' + v +'</span></div>';
                        return htmlContents;
                    }},
                    {display : /*[[#{file.capacity}]]*/"",name : 'fileCapacity',width : _columnWidth, sortable : true,align : 'left',process: function (v, _trid, _row) {
                        if(_row.fileType == 1){
                            return "";
                        }
                        var num = v;
                        var unix = "b";
                        if(v > 1073741824) {
                            num = v / 1073741824;
                            num = num.toFixed(1);
                            unix = "gb";
                        }
                        else if(v > 1048576){
                                num = v/1048576;
                                num = num.toFixed(1);
                                unix = "mb";
                        }else if(v > 1024){
                            num = v/1024;
                            num = num.toFixed(1);
                            unix = "kb";

                        }
                        return num + " " + unix;
                        }},
                    {display : /*[[#{common.operation}]]*/"",name : 'fileUuid',width : _columnWidth, sortable : true,align : 'left',process: function (v, _trid, _row) {
                            if(_row.fileType == 0){
                                var htmlContents = '<a href="' + /*[[${#request.getContextPath()}]]*/'';
                                htmlContents += '/file/download/' + v +'" style="color:blue;" target="_blank"><i class="glyphicon glyphicon-save"></i></a>';
                                return htmlContents;
                            }else{
                                return "";
                            }
                        }}
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true
            });
            query();
            //文件上传开始
            $("#upload-btn-id").click(function (event) {
                $("#file-upload-form-id").resetForm();
                var parentUuid = $("#search-path").attr("parentUuid");
                $("#upload-parent-uuid").val(parentUuid);
                $("#file-upload-dialog-id").dialog('open');
            })

            $("#file-upload-form-id").ajaxForm({
                dataType: "json",
                success: function (data) {
                    message(data.msg);
                    $("#file-table-flexigrid-id").flexReload();
                    $("#file-upload-dialog-id").dialog("close")
                },
                error: function () {
                    message(/*[[#{common.error}]]*/'');

                },
                complete: function (response, status) {

                }
            });

            $("#file-upload-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{file.upload}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var flag  = $("#file-upload-form-id input").verification();
                            if(!flag){
                                return;
                            }

                            $("#file-upload-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
            //文件上传结束

            //创建文件夹开始
            $("#mkdir-btn-id").click(function (event) {
                $("#file-mkdir-form-id").resetForm();
                var parentUuid = $("#search-path").attr("parentUuid");
                $("#mkdir-parent-uuid").val(parentUuid);
                $("#file-mkdir-dialog-id").dialog('open');
            })

            $("#file-mkdir-form-id").ajaxForm({
                dataType: "json",
                success: function (data) {
                    message(data.msg);
                    $("#file-table-flexigrid-id").flexReload();
                    $("#file-mkdir-dialog-id").dialog("close")
                },
                error: function () {
                    message(/*[[#{common.error}]]*/'');

                },
                complete: function (response, status) {

                }
            });

            $("#file-mkdir-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{file.mkdir}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var flag  = $("#file-mkdir-form-id input").verification();
                            if(!flag){
                                return;
                            }

                            $("#file-mkdir-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
            //创建文件夹结束
            //上一级目录
            $("#level-up-btn-id").click(function (event) {
                var parentUuid = $("#search-path").attr("parentUuid");
                if(parentUuid === "-1"){
                    return;
                }
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{queryFileParentById}]]*/'',
                    data: [
                        {name:"fileUuid",value:parentUuid},
                    ],
                    success: function (data) {
                        if(data){
                            $("#search-path").val(data.filePath);
                            $("#search-path").attr("parentUuid",data.fileUuid);
                            query();
                        }
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/);
                    }
                });
            });
        });//ready

        function rowDbclick(r) {
            $(r).dblclick(function (event) {
                var colVue = $(r).attr("ch").split('_FG$SP_');
            });
        }
        function query() {
            var parentUuid = $("#search-path").attr("parentUuid");
            $("#file-table-flexigrid-id").flexOptions({
                extParam:[{name:"parentUuid",value:parentUuid}]
            }).flexReload();
        }
        function enterDir(fileUuid) {
            $("#search-path").attr("parentUuid",fileUuid);
            query();
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{queryFileInfoById}]]*/'',
                data: [
                    {name:"fileUuid",value:fileUuid},
                    ],
                success: function (data) {
                    $("#search-path").val(data.msg);
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/);
                }
            });
        }

    </script>
</head>
<body>
    <nav>
        <span th:text="#{file.manage.title}"></span>
        <input id="search-path" type="text" readonly="true" value="/" parentUuid="-1" >
        <a id="level-up-btn-id" href="#" class="btn-sm">
            <i class="glyphicon glyphicon-level-up"></i>
            <span th:text="#{file.level.up}"></span>
        </a>

        <a id="mkdir-btn-id" href="#" class="btn-sm">
            <i class="glyphicon glyphicon-folder-open"></i>
            <span th:text="#{file.mkdir}"></span>
        </a>

        <a id="upload-btn-id" href="#" class="btn-sm">
            <i class="glyphicon glyphicon-open"></i>
            <span th:text="#{file.type.file}"></span>
        </a>

    </nav>
    <table id="file-table-flexigrid-id"></table>
    <div id="file-upload-dialog-id" style="display: none">
        <form th:action="@{upload}" id="file-upload-form-id" method="post" enctype="multipart/form-data">
            <input type="file" name="fileName" reg="^.{1,100}$">
            <input type="hidden" name="parentUuid" id="upload-parent-uuid" value="-1">
        </form>
    </div>

    <div id="file-mkdir-dialog-id" style="display: none">
        <form th:action="@{mkdir}" id="file-mkdir-form-id" method="post">
            <div class="form-group">
                <span th:text="#{file.mkdir}"></span>
                <input class="form-control" type="text" name="fileName" reg="^.{1,100}$">
            </div>

            <input type="hidden" name="parentUuid" id="mkdir-parent-uuid" value="-1">
        </form>
    </div>
</body>
</html>